<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">团队管理</div>
                <div class="fls">
                    <!-- <img src="../../../static/images/icon-yqcy.png" alt=""> -->
                </div>
            </div>
        </van-sticky>

        <div class="T_ibidy">
            <div class="daizhuchu" @click="pending_apply()">
                <div class="fin_fl">
                    <img src="../../../static/images/icon-dcl.png" alt="">
                    <div>待处理申请</div>
                </div>
                <div class="fin_fr">
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div>
            <div class="daizhuchu" @click="addgroup()">
                <div class="fin_fl">
                    <img src="../../../static/images/icon-xjtd.png" alt="">
                    <div>新建团队</div>
                </div>
                <div class="fin_fr">
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div>
        </div>

        <div class="titnemaes">我的团队</div>

        <div class="foreach">
            <van-pull-refresh v-model="refreshing" @refresh="onDownRefresh">
                <van-list
                v-model="loading"
                :finished="finished"
                :immediate-check="false"
                :offset="20"
                finished-text="我是有底线的"
                @load="onLoad">
                <div class="loister" v-for="(item,index) in teamsList" :key="index" @click="pending_Name(item.id,item.name,item)">
                    <div class="ntsvvdd">
                        <div class="icontitle">
                            <img src="../../../static/images/icon-team.png" alt="">
                            <div>{{item.name}}</div>
                        </div>
                        <div class="yaiqings" @click.stop="invitation(item.id)">邀请成员</div>
                    </div>

                    <div class="commtering">
                        <div class="zuobian">
                            <div class="top_dow">
                                <div>团队长：{{item.administratorName}}</div>
                                <div>业务经理数量：{{item.totalMember}}</div>
                            </div>
                            <div class="bootoms">
                                <!-- 广东省-深圳市-龙华区 -->
                                {{item.agency.busAddr}}
                            </div>
                        </div>
                        <div class="youbian">
                            <img src="../../../static/images/icon-arrow-black.png" alt="">
                        </div>
                    </div>
                    <!-- 底部 -->
                    <div class="botn_class">
                        <div class="zhifu" v-for="(items,index1) in item.businesses" :key="index1" v-if="items.businessType != 'POS'">
                            <!-- 支付宝 -->
                            <img v-if="items.businessType == 'AliPay'" src="../../../static/images/icon-zfb.png" alt="">
                            <!-- 微信 -->
                            <img v-if="items.businessType == 'WeChatPay'" src="../../../static/images/icon-wzzf.png" alt="">
                            <!-- 云闪付 -->
                            <img v-if="items.businessType == 'UnionPay'" src="../../../static/images/icon-ysf.png" alt="">
                            <div>{{items.value}}%</div>
                        </div>
                    </div>
                </div>
            </van-list>
            </van-pull-refresh>
        </div>
        <!-- <not-data v-if="dtWinNumberInfos.length == 0" :tip="nullTip"></not-data> -->
    </div>
</template>

<script>
import Vue from 'vue'
import api from '../../api/managemenTteam'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },

    data(){
        return{
            teamsList:[],//我的团队列表
            nullTip: '空空如也~',
            
            page: 0, //页码
            loading: false, //上拉加载
            finished: false, //上拉加载完毕
            refreshing: false //下拉刷新

        }
    },

    mounted(){
        this.teams();//团队管理
        
    },
    methods:{
        onDownRefresh() {
            let _this = this;
            _this.page = 0;
            _this.refreshing = false;
            if(_this.teamsList.length>20){
                _this.finished = false;  //加载中
            }
            _this.loading = false;
            this.teams() // 加载数据
        },
        // 上拉加载请求方法
        onLoad() {
            let _this = this;
            this.page++
            this.teams()
            _this.loading = true;
        },
        // 团队管理?
        teams(){
            const _this = this;
            let data = {
                sort:'id,desc',
                page:this.page,
                size:20
            }
            this.$api.teams(data).then((res)=>{
                console.log(res)
                 if (res.status == '0000') {
                    if (res.payload.content.length > 0) {

                    if (_this.page > '0') {
                        if (_this.loading) {
                            if(res.payload.content.length < '20'){
                                _this.teamsList = _this.teamsList.concat(res.payload.content);
                                _this.finished = true;  //完成加载
                            }else{
                                _this.teamsList = _this.teamsList.concat(res.payload.content);
                                _this.finished = false;  //加载中
                            }
                        }
                    }else{
                        if(res.payload.content.length < '20'){
                            _this.teamsList = res.payload.content; //第一次加载
                            _this.finished = true;  //完成加载
                        }else{
                            _this.teamsList = res.payload.content; //第一次加载
                        }
                    }

                    }else {
                        _this.teamsList = null;
                    }
                }else {
                    // _this.$toast(response.msg);
                }
                }).catch(function(xhr, error) {
                // _this.error = true;
                })


        },


        // 新建团队
        addgroup(){
            this.$router.push({ name: "addgroup" });
        },
        // 待处理申请
        pending_apply(){
            this.$router.push({ name: "pending_apply" });
        },
        pending_Name(id,name,item){
            this.$router.push({path:'/pending_Name?id='+id+'&&name='+name +'&&item=' + JSON.stringify(item)})
        },
        // 邀请成员
        invitation(id){
            this.$router.push({ path: "invitation?id="+id });
        }
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .T_ibidy{
        width: 100%;
        background: #fff;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .daizhuchu{
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F2F2F2;
    }
    .fin_fl{
        display: flex;
        align-items: center;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .fin_fl>img{
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
    .fin_fr{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fin_fr>img{
        width: 100%;
        height: 100%;
    }

    .titnemaes{
        width: 100%;
        padding: 24px 16px 16px 16px;
        box-sizing: border-box;
        color: #333333;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }

    .foreach{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .loister{
        width: 100%;
        padding: 16px 16px 0 16px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFFFFF;
        margin-bottom: 16px;
    }

    .icontitle{
        display: flex;
        align-items: center;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .icontitle>img{
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

    .commtering{
        width: 100%;
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .commtering>.zuobian{
        width: 85%;
    }

    .top_dow{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .bootoms{
        width: 100%;
        margin-top: 12px;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .youbian{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .youbian>img{
        width: 100%;
        height: 100%;
    }

    .botn_class{
        width: 100%;
        height: 40px;
        border-top: 1px solid #F2F2F2;
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .zhifu{
        height: 100%;
        display: flex;
        align-items: center;
        margin-right: 27px;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 13px;
        letter-spacing: 0px;
    }
    .zhifu>img{
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }

    .ntsvvdd{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .yaiqings{
        color: rgb(64, 152, 206);
        font-size: 15px;
        font-family: OPPOSans;
    }
</style>